<template>
  <div class="home">
    <van-nav-bar title="报账单详情" left-text="返回" left-arrow @click-left="returnBtn">
      <template #right>
        <van-icon name="search" size="22" />
      </template>
    </van-nav-bar>
    <van-tabs v-model:active="active">
      <van-tab title="单据详情">
        <div class="rb">
          <div class="rb-head van-hairline--bottom">
            <p>BX20230702421</p>
            <p>报账<span>120.00</span></p>
          </div>
          <div class="rb-content">
            <div class="rb-content-list van-hairline--bottom">
              <p>
                <van-icon class-prefix="iconfont icon-huanjie" />
                <span>环节</span>
              </p>
              <p>销售总监审核</p>
            </div>
            <div class="rb-content-list van-hairline--bottom">
              <div class="rb-content-list-left">
                <p>
                  <van-icon class-prefix="iconfont icon-riqi" />
                  <span>日期</span>
                </p>
                <p>销售总监审核</p>
              </div>
              <div class="rb-content-list-right">
                <p>
                  <van-icon class-prefix="iconfont icon-tijiaoren" />
                  <span>制单人</span>
                </p>
                <p>张三三</p>
              </div>
            </div>
            <div class="rb-content-list van-hairline--bottom">
              <p>
                <van-icon class-prefix="iconfont icon-beizhu" />
                <span>备注</span>
              </p>
              <p>教育局XXXXX</p>
            </div>
          </div>
        </div>
        <div class="rb-headline">报账项目</div>
        <div class="rb-headline-content">
          <div class="headline-content-1">
            <p>报账<span>120.00</span></p>
          </div>
          <div class="headline-content-2">摘要：202306 张三三 业务招待费</div>
          <div class="headline-content-3">
            <p><span>指标：</span>[02-01-2022]其他费用报账-销售部</p>
            <p><span>经济分类：</span>[18]业务招待费-礼品</p>
            <p><span>部门：</span>[01]销售部</p>
            <p><span>职员：</span>[ZSS]张三三</p>
          </div>
          <van-button type="primary" size="mini" class="deile">详情</van-button>
        </div>
        <div class="rb-headline">职员 张三三 暂无欠款</div>
        <div class="rb-headline rb-headline-1">出纳付款：<span>443.12</span></div>
        <div class="rb-headline rb-headline-1">发票记录：共<span>9</span>条</div>
      </van-tab>
      <van-tab title="附件">
        <div class="files">
          <div class="files-head van-hairline--bottom">
            <p class="files-head-left">
              <van-icon class-prefix="iconfont icon-fujian" />
              <span>附件</span>
            </p>
            <p>可以直接点击附件，在线预览</p>
          </div>
          <ul class="files-list">
            <li class="van-hairline--bottom">
              <div class="files-list-left">
                <van-icon class-prefix="iconfont icon-tupian" size="30" />
                <div class="files-list-content">
                  <p><span class="list-content-hindline">硒鼓抵票.jpg</span> 35.668KB</p>
                  <p><span>费用报账附件</span></p> 
                  <p>张三三<span>上传于 2020-05-14 11:30:15</span></p>
                </div>
              </div>
              <van-icon class-prefix="iconfont icon-xiazai" size="30" class="file-downLoad" />
            </li>
            <li class="van-hairline--bottom">
              <div class="files-list-left">
                <van-icon class-prefix="iconfont icon-tupian" size="30" />
                <div class="files-list-content">
                  <p><span class="list-content-hindline">硒鼓付款账单.jpg</span> 35.668KB</p>
                  <p><span>费用报账附件</span></p> 
                  <p>张三三<span>上传于 2020-05-14 11:30:15</span></p>
                </div>
              </div>
              <van-icon class-prefix="iconfont icon-xiazai" size="30" class="file-downLoad" />
            </li>
            <li class="van-hairline--bottom">
              <div class="files-list-left">
                <van-icon class-prefix="iconfont icon-file-pdf" size="30" />
                <div class="files-list-content">
                  <p><span class="list-content-hindline">餐饮费用抵票.pdf</span> 35.668KB</p>
                  <p><span>费用报账附件</span></p> 
                  <p>张三三<span>上传于 2020-05-14 11:30:15</span></p>
                </div>
              </div>
              <van-icon class-prefix="iconfont icon-xiazai" size="30" class="file-downLoad" />
            </li>
            <li class="van-hairline--bottom">
              <div class="files-list-left">
                <van-icon class-prefix="iconfont icon-file-pdf" size="30" />
                <div class="files-list-content">
                  <p><span class="list-content-hindline">消炎药-电子发票文件.pdf</span> 35.668KB</p>
                  <p><span>费用报账附件</span></p> 
                  <p>张三三<span>上传于 2020-05-14 11:30:15</span></p>
                </div>
              </div>
              <van-icon class-prefix="iconfont icon-xiazai" size="30" class="file-downLoad" />
            </li>
            <li class="van-hairline--bottom">
              <div class="files-list-left">
                <van-icon class-prefix="iconfont icon-file-pdf" size="30" />
                <div class="files-list-content">
                  <p><span class="list-content-hindline">交通邮费-电子发票文件.pdf</span> 35.668KB</p>
                  <p><span>费用报账附件</span></p> 
                  <p>张三三<span>上传于 2020-05-14 11:30:15</span></p>
                </div>
              </div>
              <van-icon class-prefix="iconfont icon-xiazai" size="30" class="file-downLoad" />
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="审批流程">
        <van-tabs v-model:active="active1" type="card" class="approve-list">
          <van-tab title="审批记录">
            <van-steps direction="vertical" :active="active2">
              <van-step>
                <div class="approve-list-content">
                  <h3>2023-07-12 13.52:44</h3>
                  <span class="gray-color">制单</span>
                </div>
                <div class="approve-list-content">
                  <div class="songshen">
                    <span class="approve-name">[张三三]张三三</span>
                    <span class="gray-color">提交送审</span>
                    <van-icon class-prefix="iconfont icon-shenpi" />
                  </div>
                  <span class="primary-color">非会签</span>
                </div>
                <div class="approve-list-yuanyin">退审原因：缺少报账明细附件信息，请补充</div>
                <div class="approve-list-tuishen"><van-button type="danger" size="mini">退审</van-button>至<span class="primary-color zhidan">制单</span>环节</div>
                <div class="approve-list-tuishenren">退审接受人：<van-icon class-prefix="iconfont icon-wode" /><span class="primary-color">刘石</span></div>
                <van-button type="danger" class="aglin-approve" size="small">从走审批流程</van-button>
              </van-step> 
              <van-step>
                <div class="approve-list-content">
                  <h3>2023-07-12 13.52:44</h3>
                  <span class="gray-color">销售总监审核</span>
                </div>
                <div class="approve-list-content">
                  <div class="songshen">
                    <span class="approve-name">[张飞]张飞</span>
                    <span class="gray-color">提交送审</span>
                    <van-icon class-prefix="iconfont icon-shenpi" />
                  </div>
                  <span class="primary-color">非会签</span>
                </div>
              </van-step>
              <van-step>
                <div class="approve-list-content">
                  <h3>2023-07-14 15.20:22</h3>
                  <span class="gray-color">销售总监审核</span>
                </div>
                <div class="approve-list-content">
                  <div class="songshen">
                    <span class="approve-name">董六</span>
                    <span class="gray-color">审核通过</span>
                    <van-icon name="passed" color="#07c160" />
                  </div>
                  <span class="primary-color">非会签</span>
                </div>
              </van-step>
              <van-step>
                <div class="approve-list-content">
                  <h3>2023-07-20 09.10:37</h3>
                  <span class="gray-color">财务主管复审</span>
                </div>
                <div class="approve-list-content">
                  <div class="songshen">
                    <span class="approve-name">王五</span>
                    <span class="gray-color">审核通过</span>
                    <van-icon name="passed" color="#07c160" />
                  </div>
                  <span class="primary-color">非会签</span>
                </div>
              </van-step>
              <van-step>
                <div class="approve-list-content">
                  <h3>2023-07-25 15.30:03</h3>
                  <span class="gray-color">财务主管复审追加审批</span>
                </div>
                <div class="approve-list-content">
                  <div class="songshen">
                    <span class="approve-name">李四</span>
                    <!-- <span class="gray-color">审核通过</span> -->
                    <span class="danger-color">未处理</span>
                    <!-- <van-icon name="passed" color="#07c160" /> -->
                  </div>
                  <span class="primary-color">非会签</span>
                </div>
              </van-step>
            </van-steps>
          </van-tab>
          <van-tab title="流程信息"></van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
  <van-dialog v-model:show="isShowModel" title="制单" show-cancel-button confirmButtonText="确认提交">
    <van-steps direction="vertical" :active="active3">
      <van-step>
        <div class="approve-list-content">
          <h3>制单</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">[张三三]张三三</span>
        </div>
      </van-step>
      <van-step>
        <div class="approve-list-content">
          <h3>销售总监审核</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">张飞</span>
        </div>
      </van-step>
      <van-step>
        <div class="approve-list-content">
          <h3>财务初审</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">董六</span>
        </div>
      </van-step>
      <van-step>
        <div class="approve-list-content">
          <h3>财务总管复审</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">刘石</span>
        </div>
      </van-step>
      <van-step>
        <div class="approve-list-content">
          <h3>打印单据</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">[张三三]张三三</span>
        </div>
      </van-step>
      <van-step>
        <div class="approve-list-content">
          <h3>财务收单</h3>
          <span class="primary-color">非会签</span>
        </div>
        <div class="approve-list-content">
          <span class="approve-name">李四</span>
          <span class="approve-name">王五</span>
        </div>
      </van-step>
    </van-steps>
  </van-dialog>
  <div class="bottom-list">
    <van-tabbar v-model="active4"  @change="onChange">
      <van-icon name="" />
      <van-tabbar-item icon="delete-o">"删除</van-tabbar-item>
      <van-tabbar-item icon="search">
        <template #icon>
          <van-icon class-prefix="iconfont icon-tubiao_tijiao" size="20" />
        </template>
      <span>提交</span>
        </van-tabbar-item>
      <van-tabbar-item icon="arrow">下一张</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script setup>
  import { ref } from 'vue'
  import { useRouter } from "vue-router";
  const router = useRouter();

  let active = ref(0)
  let active1 = ref(0)
  let active2 = ref(4)
  let active3 = ref(0)
  let active4 = ref(null)
  let isShowModel = ref(false)
  
  let tebList = ref([
    {
      name: '未提交',
      icon: 'icon-tubiao_tijiao',
    },
    {
      name: '审批中',
      icon: 'icon-shenpi',
    },
    {
      name: '未报账',
      icon: 'icon-baoxiao',
    },
    {
      name: '更多',
      icon: 'icon-gengduo',
    }
  ])

  
  const onChange = (val) => {
    if(val === 1) {
      isShowModel.value = true
    }
  }
  const returnBtn = () => {
    router.push({path: '/'})
  }
  // let 
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // background: #Fff;
}
.rb {
  
}
.rb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: .625rem ;
  & p:nth-child(2) {
    font-size: .75rem;
    display: flex;
    align-items: center;
    color: var(--van-danger-color);
    font-weight: bold;
    & span {
      font-size: 1rem;
      padding-left: .3125rem;
    }
  }
}
.rb-content {
  padding: 0 .9375rem;
  background: var(--van-gray-1);
  .rb-content-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 0;
    & span {
      padding-left: .625rem;
    }
  }
}
.rb-content-list-left, .rb-content-list-right{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  
}
.rb-content-list-left {
  padding-right: .625rem;
}
.rb-content-list-right {
  padding-left: .625rem;
}
.rb-headline {
  padding: .625rem .9375rem;
  // margin-top: .9375rem;
  background: #Fff;
  font-size: 1.125rem;
  font-weight: bold;
  margin-top:1.25rem;
}
.rb-headline-content {
  padding: .625rem .9375rem;
  background: #Fff;
  position: relative;
  margin-top: 1.25rem;
}
.headline-content-1 {
  font-size: .75rem;
  font-weight: bold;
  color: var(--van-danger-color);
  & span {
    font-size: 1rem;
  }
}
.headline-content-2 {
  color: var(--van-primary-color);
}
.headline-content-3 {
  & span {
    color: var(--van-gray-6);
  }
}
.deile {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}
.rb-headline-1 {
  & span {
    color: var(--van-danger-color);
  }
}
.files {
  padding: 0 .9375rem;
  background: #fff;
  .files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 0;
    .files-head-left {
      display: flex;
      align-items: center;
    }
    & p span {
      padding-left: .9375rem;
    }
  }
  .files-list {
    li {
      padding: .625rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--van-gray-6);
      .files-list-left {
        display: flex;
        align-items: center;
        .files-list-content {
          margin-left: 1.25rem;
          & p {
            .list-content-hindline {
              font-size: 1.125rem;
              padding-right: .9375rem;
              font-weight: bold;
              color: #000;
            }
          }
        }
      }
    }
    
  }
}
.approve-list {
  margin: .625rem 0;
}
.approve-list-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .625rem;
}
.songshen {
  display: flex;
  align-items: center;
  & span {
    padding-right: .625rem;
  }
}
.approve-list-yuanyin {
  margin-top: .625rem;
  color: var(--van-danger-color);
}
.approve-list-tuishen {
  margin-top: .625rem;
  display: flex;
  align-items: center;
}
.approve-list-tuishenren {
  margin-top: .625rem;
  display: flex;
  align-items: center;
}
.aglin-approve {
  margin-top: .625rem;
}
.gray-color {
  color: var(--van-gray-6);
}
.primary-color {
  color: var(--van-primary-color);
}

.zhidan {
  padding-left: .625rem;
}
.approve-name {
  color: #000;
  font-weight: bold;
}
.danger-color {
  color: var(--van-danger-color);
}
// .bottom-list {
//   width: ;
// }
// <div class="approve-list-content">
//                   <h3>2023-07-12 13.52:44</h3>
//                   <span>制单</span>
//                 </div>
//                 <div class="approve-list-content">
//                   <div class="songshen">
//                     <span>[张三三]张三三</span>
//                     <span>提交送审</span>
//                     <van-icon class-prefix="iconfont icon-xiazai" class="file-downLoad" />
//                   </div>
//                   <span>非会签</span>
//                 </div>
//                 <div class="approve-list-yuanyin">退审原因：缺少报账明细附件信息，请补充</div>
//                 <div class="approve-list-tuishen"><van-button type="danger">退审</van-button>至<span>制单</span>环节</div>
//                 <div class="approve-list-tuishenren">退审接受人：<van-icon class-prefix="iconfont icon-xiazai" class="file-downLoad" />[张三三]张三三</div>
//                 <van-button type="danger" class="aglin-approve">从走审批流程</van-button>
</style>

